<script setup lang="ts">
import { ref, computed } from 'vue'
import { useXxglStore } from '@/store/xxgl'
import xxglService from '@/api/xxgl'
import { XxlbQueryResult } from '@/api/xxgl-dto'

const xxStore = useXxglStore()
const dialogVisible = ref(false)
const openDialog = () => {
  dialogVisible.value = true
  xxStore.changeShow(false)
  form.value.pageNum = 1
  getTableData()
}

const form = ref({
  pageSize: 1,
  pageNum: 1,
  filter: {
    gjz: '',
    xxdjdm: 'gd0580001',
    xxzt: '1',
  },
})
/*
 * 查询消息列表
 */
const tableData = ref<XxlbQueryResult[]>([])
const total = ref(0)
const getTableData = () => {
  const params = form.value
  xxglService.queryXxList(params).then((res) => {
    tableData.value = res.data.list
    total.value = res.data.total
    // 设置已读
    // if (tableData.value[0]) {
    //   const params = { xxjlbh: tableData.value[0].xxjlbh }
    //   xxglService.updateXxzt(params).then(() => {
    //     getTableData()
    //   })
    // }
  })
}

// 禁用上一条
const disabledLast = computed(() => form.value.pageNum === 1 || total.value === 0)
// 禁用下一条
const disabledNext = computed(() => form.value.pageNum === total.value || total.value === 0)
const lastPage = () => {
  form.value.pageNum--
  getTableData()
}
const nextPage = () => {
  form.value.pageNum++
  getTableData()
}
const closeDialog = () => {
  dialogVisible.value = false
}
defineExpose({ openDialog })
</script>

<template>
  <el-dialog
    v-if="total"
    v-model="dialogVisible"
    title="紧急消息"
    width="600"
    append-to-body
    :close-on-click-modal="false"
    :before-close="closeDialog"
    :z-index="99998"
  >
    <div class="message-box">
      <div class="message-info" v-html="tableData[0]?.xxnr || ''"></div>
      <span class="time-info">
        {{ tableData[0]?.fsrq }}
      </span>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <span class="message-total"
          >第
          <span class="page-info">{{ form.pageNum }}/{{ total }}</span>
          页</span
        >
        <el-button type="primary" @click="lastPage" :disabled="disabledLast">上一条</el-button>
        <el-button type="primary" @click="nextPage" :disabled="disabledNext">下一条</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.message-box {
  height: 120px;
  text-indent: 30px;
  padding: 10px;
  border: 1px solid #a9c4df;
  border-radius: 3px;
  .message-info {
    font-size: 16px;
    height: calc(100% - 25px);
    overflow: auto;
  }
  .time-info {
    font-size: 14px;
    float: right;
    margin-top: 5px;
    color: #879bba;
  }
}
.message-total {
  float: left;
  margin-right: 10px;
  .page-info {
    color: #f00;
  }
}
</style>
